<template>
	<block v-if="value.list.length > 0">
		<!-- <view v-for="(item, index) in value.list" :key="index"> -->
			<!-- 封面图 -->
			<view
				v-if="item.is_fixed == 1"
				class="video-fixed-img"
				:style="{height: (pageWidth * (item.imgHeight/item.imgWidth)) + 'px'}"
			>
				<image :src="$util.img(item.imageUrl)" class="video-image" mode="widthFix"></image>
				<!-- 热区功能 -->
				<block v-if="item.heatMapData">
					<view class="video-headmap" v-for="(map,index) in item.heatMapData" :key="index"
					 :style="{
						 width:map.width + '%',
						 height:map.height + '%',
						 left: map.left + '%',
						 top:map.top + '%'
						 }" @click.stop="redirectTo(map.link)">
					</view>
				</block>
				<video :src="$util.img(item.videoUrl)" object-fit="fill" :autoplay="true" :controls="false" :muted="item.is_mute == 1" :loop="true" 
				:enable-progress-gesture="false" :show-mute-btn="true" :enable-play-gesture="false" class="video-box"
				:style="{height: (pageWidth * (item.imgHeight/item.imgWidth)) + 'px'}"></video>
			</view>
			<video v-else :src="$util.img(item.videoUrl)" :autoplay="item.is_play == 1" :muted="item.is_mute == 1" :poster="$util.img(item.imageUrl)"></video>
		<!-- </view>	 -->
	</block>
</template>

<script>
// 视频
export default {
	name: 'diy-video',
	props: {
		value: {
			type: Object,
			default: () => {
				return { id: '', url: '' };
			}
		}
	},
	data() {
		return {
			pageWidth: 0,
			item:[]
		};
	},
	created() {
		this.getWidth();
		if (this.value.list.length > 0) {
			this.item = this.value.list[0];
		}
		console.log(this.item)
	},
	methods: {
		redirectTo(link) {
			this.$util.diyRedirectTo(link);
		},
		getWidth() {
			// #ifndef H5
			uni.getSystemInfo({
				success: res => {
					this.pageWidth = res.screenWidth;
				}
			});
			// #endif
			
			// #ifdef H5
			if (window.frames.length != parent.frames.length) {
			　　this.pageWidth = document.getElementsByClassName('iframe-wrap')[0].clientWidth;
			} else {
				uni.getSystemInfo({
					success: res => {
						this.pageWidth = res.screenWidth;
					}
				});
			}
			// #endif
		}
	}
};
</script>

<style lang="scss" scoped>
video {
	width: 100%;
}
.video-fixed-img {
	width: 100%; overflow: hidden; text-align: center; font-size: 0;position: relative;
}
.video-box {
	position: absolute;z-index: 8;left: 0;top:0;
	width: 100%;
}
.video-image {
	position: absolute;z-index: 9;left: 0;top:0;
	width: 100%;max-width:100%;
}
.video-headmap {
	position: absolute;z-index: 10;
}
</style>
